﻿@page "/components/link"

<PageOutlet Url="components/link"
            Title="Link"
            Description="link component of the bit BlazorUI components" />

<DemoPage Name="Link"
          SecondaryNames="@(["Anchor"])"
          Description="Links lead to another part of an app, other pages, or help articles. They can also be used to initiate commands."
          Parameters="componentParameters"
          SubClasses="componentSubClasses"
          SubEnums="componentSubEnums"
          GitHubUrl="Utilities/Link/BitLink.razor"
          GitHubDemoUrl="Utilities/Link/BitLinkDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <BitLink Href="https://github.com/bitfoundation/bitplatform">Basic Link</BitLink>
        <br /><br />
        <BitLink Href="https://github.com/bitfoundation/bitplatform" IsEnabled="false">Disabled Link</BitLink>
    </DemoExample>

    <DemoExample Title="Underlined" RazorCode="@example2RazorCode" Id="example2">
        <BitLink Href="https://github.com/bitfoundation/bitplatform" Underlined>Underlined link</BitLink>
    </DemoExample>

    <DemoExample Title="NoUnderline" RazorCode="@example3RazorCode" Id="example3">
        <BitLink Href="https://github.com/bitfoundation/bitplatform" NoUnderline>NoUnderline link</BitLink>
    </DemoExample>

    <DemoExample Title="Target" RazorCode="@example4RazorCode" Id="example4">
        <BitLink Href="https://github.com/bitfoundation/bitplatform" Target="_blank">Blank target link</BitLink>
        <br /><br />
        <BitLink Href="https://github.com/bitfoundation/bitplatform" Target="_parent">Parent target link</BitLink>
        <br /><br />
        <BitLink Href="https://github.com/bitfoundation/bitplatform" Target="_self">Self target link</BitLink>
        <br /><br />
        <BitLink Href="https://github.com/bitfoundation/bitplatform" Target="_top">Top target link</BitLink>
    </DemoExample>

    <DemoExample Title="OnClick" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
        <BitLink OnClick="HandleOnClick">Click to navigate to the bit platform GitHub repo!</BitLink>
    </DemoExample>

    <DemoExample Title="Navigate to elements" RazorCode="@example6RazorCode" Id="example6">
        <div class="example-desc">If you start the Href parameter with a # character, it'll look for the an element with that id and tries to scroll the view into that element.</div>
        <br /><br />
        <BitLink Style="scroll-margin: 70px" Id="start-article" Href="#end-article">Go To End of this Article</BitLink>
        <br />
        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
        for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
        <br />
        Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
        These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
        Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
        inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
        spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
        in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
        are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        <br />
        In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
        to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
        possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
        vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
        shaped into meaning, and the emotions ready to resonate with every reader.
        <br />
        In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
        each word has the power to transform into something extraordinary. Here lies the start of something new—an
        opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
        idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
        begins here, in this quiet moment where everything is possible.
        <br />
        Imagine this space as a window into the future empty yet alive with the energy of endless possibilities.
        These words stand as temporary guides, placeholders that whisper of what is to come.
        They hold the promise of stories waiting to unfold, ideas eager to take shape, and
        connections that will soon emerge to inspire and resonate. This is not an empty page;
        it is a canvas, rich with potential and ready to transform into something meaningful.
        <br />
        For now, these lines are here to remind you of the beauty of beginnings. They are the quiet before the symphony,
        the foundation upon which your creativity will build. Soon, this space will hold your thoughts, your visions,
        and your voice a reflection of who you are and what you wish to share with the world. Every sentence will carry
        purpose, every word will invite others to connect, to think, to feel. So take a moment to dream, to imagine
        what this blank slate can become. Whether it’s a story, an idea, or a message that matters, this is your
        starting point. The possibilities are endless, and the journey begins now.
        <br />
        <BitLink Style="scroll-margin: 70px" Id="end-article" Href="#start-article">Go To Start of this Article</BitLink>
    </DemoExample>

    <DemoExample Title="Rel" RazorCode="@example7RazorCode" Id="example7">
        <BitLink Rel="BitLinkRel.NoFollow" Href="https://github.com/bitfoundation/bitplatform">Link with a rel attribute (nofollow)</BitLink>
        <br /><br />
        <BitLink Rel="BitLinkRel.NoFollow | BitLinkRel.NoReferrer" Href="https://github.com/bitfoundation/bitplatform">Link with a rel attribute (nofollow & noreferrer)</BitLink>
    </DemoExample>

    <DemoExample Title="NoColor" RazorCode="@example8RazorCode" Id="example8">
        <BitLink Href="https://github.com/bitfoundation/bitplatform">
            <BitText Typography="BitTypography.H4">Link with default color!</BitText>
            <BitText Typography="BitTypography.Subtitle1">this text color is coming from the link itself.</BitText>
        </BitLink>
        <br /><br />
        <BitLink Href="https://github.com/bitfoundation/bitplatform" NoColor>
            <BitText>Link with NoColor!</BitText>
        </BitLink>
    </DemoExample>

    <DemoExample Title="Color" RazorCode="@example9RazorCode" Id="example9">
        <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
        <br />
        <div>
            <BitLink Color="BitColor.Primary" Href="https://github.com/bitfoundation/bitplatform">Primary Color Link (default)</BitLink>
            <br /><br />
            <BitLink Color="BitColor.Secondary" Href="https://github.com/bitfoundation/bitplatform">Secondary Color Link</BitLink>
            <br /><br />
            <BitLink Color="BitColor.Tertiary" Href="https://github.com/bitfoundation/bitplatform">Tertiary Color Link</BitLink>
            <br /><br />
            <BitLink Color="BitColor.Info" Href="https://github.com/bitfoundation/bitplatform">Info Color Link</BitLink>
            <br /><br />
            <BitLink Color="BitColor.Success" Href="https://github.com/bitfoundation/bitplatform">Success Color Link</BitLink>
            <br /><br />
            <BitLink Color="BitColor.Warning" Href="https://github.com/bitfoundation/bitplatform">Warning Color Link</BitLink>
            <br /><br />
            <BitLink Color="BitColor.SevereWarning" Href="https://github.com/bitfoundation/bitplatform">SevereWarning Color Link</BitLink>
            <br /><br />
            <BitLink Color="BitColor.Error" Href="https://github.com/bitfoundation/bitplatform">Error Color Link</BitLink>
            <br /><br />
            <div style="background:var(--bit-clr-fg-sec);padding:1rem">
                <BitLink Color="BitColor.PrimaryBackground" Href="https://github.com/bitfoundation/bitplatform">PrimaryBackground Color Link</BitLink>
                <br /><br />
                <BitLink Color="BitColor.SecondaryBackground" Href="https://github.com/bitfoundation/bitplatform">SecondaryBackground Color Link</BitLink>
                <br /><br />
                <BitLink Color="BitColor.TertiaryBackground" Href="https://github.com/bitfoundation/bitplatform">TertiaryBackground Color Link</BitLink>
            </div>
            <br />
            <div style="padding:1rem">
                <BitLink Color="BitColor.PrimaryForeground" Href="https://github.com/bitfoundation/bitplatform">PrimaryForeground Color Link</BitLink>
                <br /><br />
                <BitLink Color="BitColor.SecondaryForeground" Href="https://github.com/bitfoundation/bitplatform">SecondaryForeground Color Link</BitLink>
                <br /><br />
                <BitLink Color="BitColor.TertiaryForeground" Href="https://github.com/bitfoundation/bitplatform">TertiaryForeground Color Link</BitLink>
            </div>
            <br />
            <div style="padding:1rem">
                <BitLink Color="BitColor.PrimaryBorder" Href="https://github.com/bitfoundation/bitplatform">PrimaryBorder Color Link</BitLink>
                <br /><br />
                <BitLink Color="BitColor.SecondaryBorder" Href="https://github.com/bitfoundation/bitplatform">SecondaryBorder Color Link</BitLink>
                <br /><br />
                <BitLink Color="BitColor.TertiaryBorder" Href="https://github.com/bitfoundation/bitplatform">TertiaryBorder Color Link</BitLink>
            </div>
        </div>
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example10RazorCode" Id="example10">
        <BitLink Style="color: goldenrod; font-weight:bold" Href="https://github.com/bitfoundation/bitplatform">Link with style</BitLink>
        <br /><br />
        <BitLink Class="custom-class" Href="https://github.com/bitfoundation/bitplatform">Link with class</BitLink>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example11RazorCode" Id="example11">
        <div dir="rtl">
            <BitLink Dir="BitDir.Rtl" Href="https://github.com/bitfoundation/bitplatform">پیوند راست به چپ</BitLink>
        </div>
    </DemoExample>
</DemoPage>